import React from 'react'
import PropTypes from 'prop-types'
import {Button, Col, AutoComplete, DatePicker, Form, Input, InputNumber, Row, Select} from "antd"
import moment from 'moment'
import Modal from './Modal'

const FormItem = Form.Item
const {Option} = Select
const {TextArea} = Input

const ColProps = {
  xs: 6,
  sm: 6,
  style: {
    marginBottom: 6,
  },
}

const textAreaLayout = {
  labelCol: {span: 2},
  wrapperCol: {span: 22},
}

const formItemLayout = {
  labelCol: {span: 8},
  wrapperCol: {span: 16},
  style: {
    marginBottom: 10,
  },
}

const Detail = ({
                  data,
                  disabled,
                  empList,
                  figureIp,
                  friendCircleType,
                  source,
                  operateStatus,
                  hideViewInfoBtn,
                  handleSubmit,
                  handleSearch,
                  handleViewHideMsg,
                  handleUpdate,
                  onEdit,
                  dispatch,
                  onCancel,
                  form: {
                    getFieldDecorator,
                    getFieldsValue,
                    setFieldsValue,
                  },
                  modalProps,
                }) => {
  const {id, pay, wxId} = data

  // let disabled = true
  const editing = !disabled

  // const onEdit = () => {
  //   disabled = false
  //   console.log('1111111', disabled)
  // }

  // const onCancel = () => {
  //   disabled = true
  // }
  const handleBelongSelect = (value, {props}) => {
    getFieldDecorator('operator.belongEmpName', {initialValue: props.children})
  }

  const handlePromoterSelect = (value, {props}) => {
    getFieldDecorator('operator.promoterName', {initialValue: props.children})
  }

  const onSave = () => {
    const fields = getFieldsValue()
    const {operator, bankingInfo} = fields
    let registerTime = operator.registerTime['_i']
    const data = {
      operator: {
        ...operator,
        registerTime,
        id,
        wxId,
        payId: pay ? pay.id : undefined,
      },
      bankingInfo: {
        payId: pay ? pay.id : undefined,
        ...bankingInfo,
      },
    }
    dispatch({
      type: 'operatorDetail/updateState',
      payload: {
        disabled: true,
      },
    })

    handleUpdate(data)
  }

  return (
    <Form layout="horizontal">
      <Row gutter={24}>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="运营微号">
            <Input disabled={true} value={data.wxNo} placeholder="请输入"/>
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="归属员工">
            {getFieldDecorator('operator.belongEmp.id', {initialValue: data.belongEmpName && data.belongEmp ? data.belongEmp.id : undefined})
            (<AutoComplete
                dataSource={empList.map(item => <Option key={item.id}>{item.name}</Option>)}
                style={{width: '100%'}}
                onSearch={handleSearch}
                disabled={disabled}
                onSelect={handleBelongSelect}
                placeholder="请输入员工工号或名称"
              />,
            )}
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="推广员工">
            {getFieldDecorator('operator.promoter.id', {initialValue: data.promoterName && data.promoter ? data.promoter.id : undefined})(
              <AutoComplete
                dataSource={empList.map(item => <Option key={item.id}>{item.name}</Option>)}
                style={{width: '100%'}}
                onSearch={handleSearch}
                disabled={disabled}
                onSelect={handlePromoterSelect}
                placeholder="请输入员工工号或名称"
              />,
            )}
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="微信昵称">
            <Input disabled={true} value={data.nickname} placeholder="请输入"/>
          </FormItem>
        </Col>
      </Row>
      <Row gutter={24}>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="微信密码">
            {getFieldDecorator('operator.loginPassword', {initialValue: data.loginPassword})(<Input disabled={disabled}
                                                                                                    placeholder="请输入"/>)}
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="支付密码">
            {getFieldDecorator('operator.pay.payPassword', {initialValue: data.pay ? data.pay.payPassword : undefined})(
              <Input disabled={disabled} placeholder="请输入"/>)}
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="人物IP">
            {getFieldDecorator('operator.ip.id', {initialValue: data.ipName && data.ip ? data.ip.id : undefined})(
              <Select allowClear onSelect={(value, {props}) => {
                getFieldDecorator('operator.ipName', {initialValue: props.children})
              }} placeholder="请选择" disabled={disabled}>
                {figureIp.map(item => (<Option value={item.id}>{item.name}</Option>))}
              </Select>,
            )}
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="朋友圈类型">
            {getFieldDecorator('operator.friendCircle.id', {initialValue: data.friendCircleTypeName && data.friendCircle ? data.friendCircle.id : undefined})(
              <Select allowClear onSelect={(value, {props}) => {
                getFieldDecorator('operator.friendCircleTypeName', {initialValue: props.children})
              }} disabled={disabled} placeholder="请选择">
                {friendCircleType.map(item => (<Option value={item.id}>{item.name}</Option>))}
              </Select>,
            )}
          </FormItem>
        </Col>

      </Row>
      <Row gutter={24}>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="好友数量">
            <Input disabled={true} value={data.friendNum} placeholder="请输入"/>
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="自身来源">
            {getFieldDecorator('operator.source.id', {initialValue: data.sourceName && data.source ? data.source.id : undefined})(
              <Select allowClear onSelect={(value, {props}) => {
                getFieldDecorator('operator.sourceName', {initialValue: props.children})
              }} disabled={disabled} placeholder="请选择">
                {source.map(item => (<Option value={item.id}>{item.name}</Option>))}
              </Select>,
            )}
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="设备码">
            <Input disabled={true} value={data.deviceId} placeholder="请输入"/>
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="注册日期">
            {getFieldDecorator('operator.registerTime', {initialValue: moment(data.registerTime, 'YYYY-MM-DD HH:mm:ss')})(
              <DatePicker disabled={disabled} style={{width: '100%'}}
                          placeholder="请选择"/>)}
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="绑定号码">
            <Input disabled={true} value={data.bindPhoneNum} placeholder="请输入"/>
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="运营状态">
            {getFieldDecorator('operator.operateStatus.id', {initialValue: data.operateStatusName && data.operateStatus ? data.operateStatus.id : undefined})(
              <Select allowClear onSelect={(value, {props}) => {
                getFieldDecorator('operator.operateStatusName', {initialValue: props.children})
              }} disabled={disabled} placeholder="请选择">
                {operateStatus.map(item => (<Option value={item.id}>{item.name}</Option>))}
              </Select>,
            )}
          </FormItem>
        </Col>

        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="被封次数">
            {getFieldDecorator('operator.bannedTimes', {initialValue: data.bannedTimes})(<InputNumber
              disabled={disabled} placeholder="请输入"/>)}
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="最后更新">
            <Input disabled={true} value={data.lastFriendCircleUpdateTime} placeholder="请输入"/>
          </FormItem>
        </Col>
      </Row>
      <Row gutter={24}>

        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="总成交额">
            <Input disabled={true} value={data.signedTotalAmounts} placeholder="请输入"/>
          </FormItem>
        </Col>

        <Col {...ColProps} xl={{span: 9}} md={4} sm={24}>
          <FormItem labelCol={{span: 5}} wrapperCol={{span: 18}} label="录入日期">
            <Col span={11}>
              <FormItem>
                <DatePicker disabled={true} style={{width: '100%'}}
                            defaultValue={moment(data.ctime, 'YYYY-MM-DD HH:mm:ss')} placeholder="请输入"/>
              </FormItem>
            </Col>
          </FormItem>
        </Col>

      </Row>
      <Row gutter={24}>
        <Col {...ColProps} xl={{span: 24}}>
          <FormItem labelCol={{span: 2}} wrapperCol={{span: 20}} label="支付绑定">
            <Col span={3}>
              <FormItem>
                {getFieldDecorator('bankingInfo.id', {initialValue: data.pay ? data.pay.bankingInfo ? data.pay.bankingInfo.id || undefined : undefined : undefined})}
                {getFieldDecorator('bankingInfo.cardHolderName', {initialValue: data.pay ? data.pay.bankingInfo ? data.pay.bankingInfo.cardHolderName || '-' : '-' : '-'})(
                  <Input disabled={disabled} placeholder="持卡人姓名"/>)}
              </FormItem>
            </Col>
            <Col span={1}>
              <span style={{display: 'inline-block', width: '100%', textAlign: 'center'}}>
                -
                </span>
            </Col>
            <Col span={6}>
              <FormItem>
                {getFieldDecorator('bankingInfo.idCardNo', {initialValue: data.pay ? data.pay.bankingInfo ? data.pay.bankingInfo.idCardNo || '-' : '-' : '-'})(
                  <Input disabled={disabled} placeholder="身份证"/>)}
              </FormItem>
            </Col>
            <Col span={1}>
              <span style={{display: 'inline-block', width: '100%', textAlign: 'center'}}>
                -
                </span>
            </Col>
            <Col span={6}>
              <FormItem>
                {getFieldDecorator('bankingInfo.bankCardNum', {initialValue: data.pay ? data.pay.bankingInfo ? data.pay.bankingInfo.bankCardNum || '-' : '-' : '-'})(
                  <Input disabled={disabled} placeholder="银行卡"/>)}
              </FormItem>
            </Col>
            <Col span={1}>
              <span style={{display: 'inline-block', width: '100%', textAlign: 'center'}}>
                -
                </span>
            </Col>
            <Col span={5}>
              <FormItem>
                {getFieldDecorator('bankingInfo.phoneNum', {initialValue: data.pay ? data.pay.bankingInfo ? data.pay.bankingInfo.phoneNum || '-' : '-' : '-'})(
                  <Input disabled={disabled} placeholder="预留手机号"/>)}
              </FormItem>
            </Col>
          </FormItem>
        </Col>
      </Row>
      <Row gutter={24}>
        <Col md={22} sm={24}>
          <FormItem {...textAreaLayout} label="备注">
            {getFieldDecorator('operator.remark', {initialValue: data.remark})(<TextArea disabled={disabled} rows={4}
                                                                                         placeholder="请输入"/>)}
          </FormItem>
        </Col>
      </Row>
      <Row gutter={24}>
        <Col xl={{span: 6}} md={6} sm={24}>
        </Col>
        <Col xl={{span: 6}} md={6} sm={24}>
        </Col>
        <Col xl={{span: 5}} md={5} sm={24}>
        </Col>
        <Col xl={{span: 7}} md={7} sm={24}>
          {editing ? (<div>
            {!hideViewInfoBtn && <Button className="margin-right" onClick={handleViewHideMsg}>查看隐藏信息</Button>}
            {/* <Button className="margin-right" onClick={handleViewHideMsg}>查看隐藏信息</Button> */}
            <Button className="margin-right" type="primary" onClick={onSave}>保存编辑</Button>
            <Button onClick={onCancel}>取消</Button>
          </div>) : <div>
            {/* <Button className="margin-right" type="success" onClick={handleViewHideMsg}>查看隐藏信息</Button> */}
            {!hideViewInfoBtn && <Button className="margin-right" onClick={handleViewHideMsg}>查看隐藏信息</Button>}
            <Button type="primary" onClick={onEdit}>编辑</Button>
          </div>}
        </Col>
        <Modal {...modalProps} />
      </Row>
    </Form>
  )
}


Detail.propTypes = {
  handleSubmit: PropTypes.func,
  handleFormReset: PropTypes.func,
  form: PropTypes.object,
}

export default Form.create()(Detail)
